<template>
    <view class="cu-timeline">
        <view class="cu-item" v-for="(discussion, index) in discussions" :class="[isTeacher(discussion)?'text-red':'text-green']"
            :key="index">
            <view class="cu-list menu-avatar comment">
                <view :id="'discussion-'+index" class="cu-item" :class="[isTeacher(discussion)? 'red-solid':'green-solid']"
                    style="padding: 10rpx;">
                    <view class="content padding-lr-sm">
                        <view class="flex justify-between align-center">
                            <view class="text-grey">{{discussion.username}}</view>
                            <view class="cu-tag round" :class="[isTeacher(discussion) ? 'bg-red':'bg-green']">{{ role(discussion) }}</view>
                            <view class="cu-avatar round" :style="{'background-image':'url(' + discussion.avatar + ')'}"></view>
                        </view>
                        <view class="padding-sm radius margin-top-sm text-sm light" :class="[isTeacher(discussion) ? 'bg-red':'bg-green']">
                            <view class="flex">
                                <rich-text :nodes="discussion.content"></rich-text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        discussions: Object
    },
    data() {
        return {

        };
    },
    methods: {
        isTeacher: function(dialogue) {
            return dialogue.role == 'instructor';
        },
        role: function(dialogue) {
            if (dialogue.role == 'instructor') {
                return '老师';
            } else {
                return '学生';
            }
        }
    },
    computed: {

    }
};
</script>

<style lang="scss" scoped>
    $content-left-offset: 50rpx;

    .cu-timeline {
        margin-bottom: 80rpx;

        > {
            .cu-item {
                position: relative;

                .cu-avatar {
                    position: relative;
                }

                .content {
                    position: relative;
                }
            }
        }
    }

    .red-solid {
        border: solid 1px #e54d42;
        border-radius: 20rpx;
    }

    .green-solid {
        border: solid 1px #39b54a;
        border-radius: 20rpx;
    }
</style>
